<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link href="/static/img/logo/logo.png" rel="icon">
    <title>Serverless Platform</title>
    <link href="/static/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
    <link href="/static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <!-- Select2 -->
    <link href="/static/vendor/select2/dist/css/select2.min.css" rel="stylesheet" type="text/css">
    <!-- Bootstrap DatePicker -->
    <link href="/static/vendor/bootstrap-datepicker/css/bootstrap-datepicker.min.css" rel="stylesheet">
    <!-- Bootstrap Touchspin -->
    <link href="/static/vendor/bootstrap-touchspin/css/jquery.bootstrap-touchspin.css" rel="stylesheet">
    <!-- ClockPicker -->
    <link href="/static/vendor/clock-picker/clockpicker.css" rel="stylesheet">
    <!-- RuangAdmin CSS -->
    <link href="/static/css/ruang-admin.min.css" rel="stylesheet">
    <script src="/static/vendor/jquery/jquery.min.js"></script>
    <script src="/static/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="/static/vendor/jquery-easing/jquery.easing.min.js"></script>
</head>

<body id="page-top">
<div class="info" style="width: 100%;text-align: center;margin-bottom: 10px">
    <h2 style="color: #8261ee;margin-bottom: 10px">Function Detail</h2>
    <p style="color: #8261ee">The details for this function are shown below.</p>
</div>
<pre id="editor" style="height: 700px;"></pre>

<script src="/static/src/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/src/keybinding-vim.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/src/ext-beautify.js" type="text/javascript" charset="utf-8"></script>
<script>
    const editor = ace.edit("editor");
    editor.setTheme("ace/theme/dreamweaver");
    {#editor.setKeyboardHandler("ace/keyboard/vim")#}
    editor.session.setMode("ace/mode/yaml");
    editor.setFontSize(16)
    editor.session.setTabSize(2)
    editor.setReadOnly(true)

    $(function () {
        $.get('/function/get_specify_function_info', {
            'csrfmiddlewaretoken': '{{ csrf_token }}',
            'function_name': '{{ function_name }}'
        }, function (data) {
            const value = jsyaml.dump(data)
            editor.setValue(value)
        })
    })

</script>
<!-- Scroll to top -->
<a class="scroll-to-top rounded" href="#page-top">
    <i class="fas fa-angle-up"></i>
</a>


<!-- Select2 -->
<script src="/static/vendor/select2/dist/js/select2.min.js"></script>
<!-- Bootstrap Datepicker -->
<script src="/static/vendor/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
<!-- Bootstrap Touchspin -->
<script src="/static/vendor/bootstrap-touchspin/js/jquery.bootstrap-touchspin.js"></script>
<!-- ClockPicker -->
<script src="/static/vendor/clock-picker/clockpicker.js"></script>
<!-- RuangAdmin Javascript -->
<script src="/static/js/ruang-admin.min.js"></script>
<!-- Javascript for this page -->
<script src="https://cdn.bootcss.com/js-yaml/3.13.1/js-yaml.min.js"></script>

<script>

</script>

</body>

</html>